<template>
	<view class="user">
		<view class="userinfo">
			<view class="top">
				<view class="avator">
					<uni-icons :type="avatorType" :size="avatorSize" :color="logColor" />
				</view>
				<view class="uname" v-if="isLoggedIn">
					<view>{{ userInfo.username }}</view>
					<view>{{ userInfo.mobile }}</view>
				</view>
				<view class="uname" v-else @tap="toLogin">
					点击登录
				</view>
			</view>
		</view>
		<view class="list">
			<uni-list>
				<uni-list-item v-for="(item, index) in manageList" :key="index" :title="item.name"
					:show-extra-icon="true" :extra-icon="item.icon" clickable link @tap="navto(index)" />
			</uni-list>
		</view>
	</view>
	<uni-popup ref="popup" type="dialog">
		<uni-popup-dialog title="通知"  content="成功消息" :duration="2000"  @confirm="confirm"></uni-popup-dialog>
	</uni-popup>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import {
		userStore
	} from '../../store/userStrore.js';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	const popup=ref(null)

	const store = userStore();
	const logColor = ref('#ccc');
	const avatorType = ref('person-filled');
	const avatorSize = ref('30');

	const userInfo = computed(() => store.userInfo);
	const isLoggedIn = computed(() => store.isLogin);

	const manageList = ref([{
			name: '订单管理',
			icon: {
				color: '#56c48b',
				size: '22',
				type: 'shop'
			}
		},
		{
			name: '地址管理',
			icon: {
				color: '#ff6700',
				size: '22',
				type: 'location-filled'
			}
		},
		{
			name: '我的收藏',
			icon: {
				color: '#0225ff',
				size: '22',
				type: 'star'
			}
		},
		{
			name: '退出登录',
			icon: {
				color: '#0081b9',
				size: '22',
				type: 'gear'
			}
		},
	]);

	function navto(index) {
		if (index === 3) {
			if(store.isLogin){
				popup.value.open()
				 
			}
			
		}
	}
	function confirm(){
		store.clearUserInfo()
	}

	function toLogin() {
		uni.navigateTo({
			url: '/pages/login/login'
		});
	}
</script>

<style lang="scss">
	.user {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		padding: 20px;
		box-sizing: border-box;
	}

	.userinfo {
		width: 100%;
	}

	.top {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.avator {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		background-color: #f0f0f0;
		margin-right: 20px;
	}

	.avator uni-icons {
		font-size: 30px;
		color: #007AFF;
	}

	.uname {
		font-size: 16px;
		color: #333;
	}

	.uname>view:not(:last-child) {
		margin-bottom: 5px;
	}

	.login-prompt {
		padding: 10px;
		border: 1px solid #007AFF;
		border-radius: 4px;
		color: #007AFF;
		text-align: center;
		cursor: pointer;
	}

	.login-prompt:active {
		background-color: #f0f0f0;
	}

	.list {
		width: 100%;
	}

	uni-list {
		width: 100%;
	}

	uni-list-item {
		padding: 15px 0;
		border-bottom: 1px solid #eee;
	}

	uni-list-item:last-child {
		border-bottom: none;
	}

	uni-list-item:active {
		background-color: #f0f0f0;
	}
</style>